<template>
  <div class="surfMinMap-container">
    <div class="surfMinMap">
      <info-window
        :map="map"
        :markers="markers"
        @on-change="changeMarker">
        <el-descriptions title="站点分钟要素" size="medium" :column="3" border style="width: 700px">
          <el-descriptions-item label="区站号（字符）" label-align="left">
            {{theMarker.stationIdC}}
          </el-descriptions-item>
          <el-descriptions-item label="接收时间" label-align="left">
            {{theMarker.createTime}}
          </el-descriptions-item>
          <el-descriptions-item label="是否最新" label-align="left">
            {{theMarker.isNew === '1' ? '是' : '不是'}}
          </el-descriptions-item>
          <el-descriptions-item label="经度" label-align="left">
            {{theMarker.lng}}
          </el-descriptions-item>
          <el-descriptions-item label="纬度" label-align="left">
            {{theMarker.lat}}
          </el-descriptions-item>
          <el-descriptions-item label="气压" label-align="left">
            {{theMarker.prs}}
          </el-descriptions-item>
          <el-descriptions-item label="温度" label-align="left">
            {{theMarker.tem}}
          </el-descriptions-item>
          <el-descriptions-item label="瞬时风速" label-align="left">
            {{theMarker.winSInst}}
          </el-descriptions-item>
          <el-descriptions-item label="瞬时风向" label-align="left">
            {{theMarker.winDInst}}
          </el-descriptions-item>
          <el-descriptions-item label="湿度" label-align="left">
            {{theMarker.rhu}}
          </el-descriptions-item>
          <el-descriptions-item label="雨量" label-align="left">
            {{theMarker.pre}}
          </el-descriptions-item>
        </el-descriptions>
      </info-window>
    </div>
    <div style="right: 100px;top: 100px;position: absolute">
      <el-row>
        <el-col :span="12">
          <el-button @click="clickSurfTab('all')" type="danger">初始</el-button>
        </el-col>
        <el-col :span="12">
          <el-button @click="initSurfMinMarker" type="primary">刷新</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-button @click="clickSurfTab('prs')">气压</el-button>
        </el-col>
        <el-col :span="12">
          <el-button type="success" @click="clickSurfTab('tem')">温度</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-button type="info" @click="clickSurfTab('winSInst')">风速</el-button>
        </el-col>
        <el-col :span="12">
          <el-button type="warning" @click="clickSurfTab('winDInst')">风向</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-button type="danger" @click="clickSurfTab('rhu')">湿度</el-button>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" @click="clickSurfTab('pre')">雨量</el-button>
        </el-col>
      </el-row>
    </div>
    <socket></socket>
  </div>
</template>

<script>
import infoWindow from '@/components/infoWindow/infoWindow.vue';
import { listMap } from "@/api/modules/surfMin";
import Socket from "@/components/Socket/index"
import icon1 from "@/assets/marker/72B5FC.png";
import icon2 from "@/assets/marker/FF9EB2.png";
import icon3 from "@/assets/marker/D1F4FD.png";
import icon4 from "@/assets/marker/FF9EFF.png";
import icon5 from "@/assets/marker/FFD4B2.png";
import icon6 from "@/assets/marker/FFE0A8.png";

export default {
  name: "surfMinMap",
  components: {
    infoWindow,
    Socket
  },
  data() {
    return {
      // 地图配置
      map: {
        ak: 'udsmk3UY80oXjW6ez70FKjaQK2kWjBNj',
        // 中心点
        center: {
          lng: '106.42',
          lat: '26.35'
        },
        // 缩放等级
        zoom: 12,
        width: '100%',
        height: '100%',
      },
      // 地图标记点
      markers: [],
      // 当前站点
      theMarker:{},
      // 所有站点要素
      allSurfMinList:[],
      // 初始化的标记点
      initMarkers:[],
    }
  },
  mounted() {
    this.initSurfMinMarker();
  },
  methods: {
    // 切换标记点 marker当前标记点对象
    changeMarker(marker) {
      this.theMarker = marker;
    },
    // 点击要素
    clickSurfTab(name) {
      this.markers = [];
      let newMarkers = this.initMarkers;
      newMarkers.forEach(oldMarker =>{
        this.markers.push(this.getNewMarker(oldMarker,name));
      })
    },
    /** 获取新的标记点 */
    getNewMarker(oldMarker,name){
      let newMarker = oldMarker;
      // 打开标签栏
      newMarker.labelShow = true;
      newMarker.color = 'red';
      let markerIcon = {
        url:icon1,
        size:{
          width: 50,
          height: 60,
        }
      };
      if(name === 'all'){
        newMarker.labelShow = false;
        markerIcon.url = icon1;
      }
      if(name === 'prs'){
        newMarker.content = oldMarker.prs;
        markerIcon.url = icon1;
        newMarker.backgroundColor = '#72B5FC';
      }
      if(name === 'tem'){
        newMarker.content = oldMarker.tem;
        markerIcon.url = icon2;
        newMarker.backgroundColor = '#FF9EB2';
      }
      if(name === 'winSInst'){
        newMarker.content = oldMarker.winSInst;
        markerIcon.url = icon3;
        newMarker.backgroundColor = '#D1F4FD';
      }
      if(name === 'winDInst'){
        newMarker.content = oldMarker.winDInst;
        markerIcon.url = icon4;
        newMarker.backgroundColor = '#FF9EFF';
      }
      if(name === 'rhu'){
        newMarker.content = oldMarker.rhu;
        markerIcon.url = icon5;
        newMarker.backgroundColor = '#FFD4B2';
      }
      if(name === 'pre'){
        newMarker.content = oldMarker.prs;
        markerIcon.url = icon6;
        newMarker.backgroundColor = '#FFE0A8';
      }
      newMarker.markerIcon = markerIcon;
      return newMarker;
    },
    /** 初始化要素标记点 */
    initSurfMinMarker(){
      // 先置空
      this.markers = [];
      listMap().then(res =>{
        this.allSurfMinList = res.data;
        console.log(this.allSurfMinList)
        this.allSurfMinList.forEach(surf =>{
          this.markers.push({
            lng: surf.lon,
            lat: surf.lat,
            isNew:surf.isNew,
            labelShow:false,
            markerIcon: this.getMarkerIcon(surf.isNew),
            createTime:surf.createTime,
            stationIdC:surf.stationIdC,
            prs:surf.prs,
            tem:surf.tem,
            winSInst:surf.winSInst,
            winDInst:surf.winDInst,
            rhu:surf.rhu,
            pre:surf.pre
          })
        })
      });
      // 保存一个初始化的标记值 避免后期想用没得用
      this.initMarkers = this.markers;
      console.log(this.initMarkers)
    },
    /** 获取图标Icon */
    getMarkerIcon(isNew){
      let markerIcon = {
        url:icon1,
        size:{
          width: 50,
          height: 60,
        }
      }
      if(isNew !== '1'){
        markerIcon.url = icon2;
      }
      return markerIcon;
    },
  }
}
</script>

<style scoped>
.surfMinMap-container {
  display: flex;
  width: 100%;
  height: 90vh;
}

.surfMinMap {
  width: 100%;
  flex: 1; /*沾满剩下的空间*/
  overflow: hidden
}
</style>
